metavistfandomcom-20200214-history
Development Notes
General Notes When creating elements such as textboxes, listboxes, labels, etc., I used the asp version, so that if we needed to grab their values in the code behind they would be easier to get. For labels, I usually do not assign them an id as they will not be referenced in the code or used for anything other than just text on the page. There are various CSS classes used to get some quick formatting for the elements. Some of these classes include: OffsetRight - create a 5 px margin on the left and right of this element OffsetUpDown - create a 5 px margin on the top and bottom of this element VerticalAlignTop - vertical align top this element I do these because we cannot directly apply style to asp elements. Also using Css is just good practice in general. You'll find more of these classes in MetaVistStyle.CSS in the main folder of the project. Master Pages and User Controls There are three kinds of pages in this project. First, there is one master page. The master page contains the side menu, top menu, and a place for all of the content of the different pages. The master page used for the project is MetaVist.Master, found in the main folder of the project. The next kind of page is an .aspx page based on the master page. This page contains everything from the master page, plus page specific content. Any page selected via the left hand menu is a "panel," and is built using the master page and the filling in the content with the page's content. Finally, the last kind of pages are user controls. Any page that is a popup is a user control. User controls (in this project) always have: 1) A link to the StyleSheet, MetaVistStyle.css 2) An ASP panel, with the CssClass of that panel being "Contact-Panel." This is the CSS needed for the popup to display correctly. 3) A set of buttons that say "ok" and "cancel", so that they can link up to the next element that all user controls have, which is... 4) ajaxToolkit:ModalPopupExtender. This is what allows for the popups to show on the page. The popup control id of the MPE is the id of the panel in the user control. The BackgroundCssClass is always "Contact_Panel_BG" The TargetControlID is (usually) the ID of the button that shows that popup. There are some cases where this is not true, which are outlined below. An Ok ControlID and CancelControlID, both set to the ID's of the "Ok" and "Cancel" buttons found on the page. You can see the template I use for all user controls in the UserControlTemplate file found in the main folder of the project. Popups There are two kinds of popups: popups that are used on one specific page for one specific button, and "common" popups which are found on multiple pages. For specific button popups, all you need to do is create the user control with UI for that popup, set the ID of the button, then drag the UserControlFile into the File that is calling this popup. This makes a asp element that includes the user control in the page. For "common" popups, things get a bit tricker. "Common" popups have their targetControlID always set to the same "hidden" element. If you want to use a "common" element in a popup, you need to setup a BehaviorID inside of the ModalPopupExtender element set to a specific name. Then, you need to create the hidden element in the page where you want the popup to appear, and set the targetControlID of the ModalPopupExtender to that element. Then you want to drag the UserControl into the page so as to include it in the page. FINALLY, you need to set the OnClick of the button that you want to open the page equal to "ShowModalPopup(modalPopupId, zIndex); return false;" where modalPopupId is the BEHAVIOR ID of the modal we want to show, and the zindex is the index of the page relative to other pages. You return false at the end of this call so that it does not do a postback. Postbacks refresh the page, which is something we don't want, as it refreshes the page. usually you want to set the z-index to 10050 or higher. The z-index is important because we used to have a bug where if a popup showed another popup, it would appear BEHIND the old popup instead of in front of it. Any UserControls found in the "Common" folder are "Common" popups. (Surprise). Look for these if you are unsure how they work. Textboxes When creating textboxes, all textboxes have a "textmode" which determines what kind of information will be input into them. There are a variety of these, and I list them and what they are used for below. Multiline - used for textboxes that have more than one line in them. Otherwise they default to having the cursor in the middle of the textbox. Number - used for textboxes that just have numbers in them. When highlighting this kind of textbox, an up/down arrow combo shows up on the right side of the textbox. Date - used for full dates. The old functionality of the project used to have seperate boxes for month, day and year, but date boxes allow users to use a dropdown calendar to select the date, which seems more intutive and easy to use than three separate boxes. Submitting Data in Forms There is a lot of data that needs to be submitted between different pages and popups so that the user can look see the data as he/she writes it up. To submit data in a form, the function "extractFormData(modalId, dataClass)" must be called. Call this function INSIDE the function that is called by the "OnOkScript" property in the specific User Control's ModalPopupExtender. In a specific form that you want to extract data out of, you will need to find each textbox,listbox, etc that you want the data from and add a "dataClass" do it. This is just a name so that the extractFormData function knows which inputs to grab values from. An example of this is seen in the contactAddress user control in the "Common" folder. extractFormData(modalId, dataClass) modalID - the behvaiorID of the ModalPopupExtender that you want to extract data from. dataClass - a class name that is used for all elements to be extracted from a user control.